<template>
    <div>
        面试题列表{{ $route.params.page }}
        <div>
            <!-- 路由高亮 -->
            <!-- 路由跳转 -->
            <RouterLink to="/" active-class="myactive" exact-active-class="myexact">首页</RouterLink>/
            <RouterLink to="/manage" active-class="myactive" exact-active-class="myexact">面试题管理</RouterLink>/
            <RouterLink to="/manage/question" active-class="myactive" exact-active-class="myexact">面试题列表</RouterLink>
        </div>
        <ul>
            <li>
                <RouterLink to="/manage/question">你期望薪资多少0</RouterLink>
            </li>
            <li>
                <RouterLink to="/manage/question/123">你期望薪资多少1</RouterLink>
            </li>
            <li>
                <RouterLink to="/manage/question/456">你期望薪资多少2</RouterLink>
            </li>
        </ul>
            <div class="example-pagination-block">
                <div class="example-demonstration">When you have few pages</div>
                <el-pagination layout="prev, pager, next" :total="50" />
            </div>
    </div>
</template>

<script>
export default {

    beforeRouteEnter(to, from, next) {
        //比创建更早的执行 ，如果路由没有 next()确定 那么组件不会被创建. 
        //所以 beforeRouteEnter比beforeCreate更早执行 没有this
        console.log("组件内 beforeRouteEnter==> =to==>") //to, 'from===>', from, 'this==>', this);
        // next(true);//确定路由进入下一步.
        // next("/login"); 
        next((vm) => {///最后.........
            //这里vm就相当于this。 在路由确认之后执行的回调函数.在created之后执行
            console.log('组件内是 beforeRouteEnter的next回调函数vm===>');
            //作用 一般 用在组件被keep-alive缓存后 生命周期失效. 但是期望每次进来要执行ajax..可以写在这里..
        });
    },
    // beforeCreate() {
    //     console.log("beforeCreate===>", this);
    // },
    // created() {
    //     console.log('createdthis.$route===>', this.$route);
    // },

    // mounted() {
    //     document.title = this.$route.meta.title;
    // },
    beforeRouteLeave(to, from, next) {
        console.log("组件内 beforeRouteLeave===>")// "to===>", to, 'from===>', from);
        next(true);
    },
    beforeRouteUpdate(to, from, next) {//vue2.2之后新增 vue 2.7  vue3
        //当前路由里面 从 /manage/question ==跳转到=> /manage/question/123
        //当前路由里面 从 /manage/question/123 ==跳转到=> /manage/question/456
        console.log("组件内 beforeRouteUpate====>", to.params.page, to);
        next();
    },

    // watch:{
    //     "$route":{
    //         handler:(newValue)=>{
    //             console.log(newValue.params.page)
    //         },
    //         deep:true//深层侦听.
    //     }
    // }
}
</script>

<style scoped>
.myactive {
    color: blue;
    font-size: 20px;
}

.myexact {
    color: red;
    font-size: 25px;
}
</style>